<template>
    <div class="store-list-main">
        <div class="search-wrap">
            <div class="searchbar clear">
                <img src="../assets/image/ico_seach@2x.png" class="search-icon fl"/>
                <input type="text" :placeholder="searchText" class="search-text fl">
            </div>
        </div>
        <nav class="navbar clear">
            <div class="nav-item fl"><a href="javascript:;" @click='tabToggle("typeA");' v-bind:class="{active : (type == 'typeA')}"><span>综合</span></a></div>
            <div class="nav-item fl"><a href="javascript:;" @click='tabToggle("typeB");' v-bind:class="{active : (type == 'typeB')}"><span>附近</span></a></div>
        </nav>
        <div class="nav-container">
            <ul class="nav-container-list" v-if="type == 'typeA'">
                <li class="storebar" v-for="item in storeList">
                    <div class="store-msg clear">
                        <img src="" class="store-logo fl"/>
                        <div class="store-text fl">
                            <p class="store-name clear"><i class="fl">{{item.brandName}}</i><i class="fl">（{{item.storeName}}）</i><span class="distance fr">距您{{item.distant}}</span></p>
                            <p class="store-add clear"><i class="fl">{{item.storeAddress}}</i><img src="../assets/image/ico_enter@2x.png" class="tomap fr"/></p>
                        </div>
                    </div>
                    <ul class="store-pro clear">
                        <li class="fl" v-for="product in item.product"><img src="" class="product-img"/><p class="product-price">￥{{product.productPrice}}</p></li>
                    </ul>
                    <ul class="store-nav">
                        <li class="fl"><router-link id="" to=""><span class="clear"><img src="../assets/image/ico_location2@2x.png" class="nav-icon fl"/><p class="nav-text fr">地图</p></span></router-link></li>
                        <li class="fl"><router-link id="" to=""><span class="clear"><img src="../assets/image/ico_telephone@2x.png" class="nav-icon fl"/><p class="nav-text fr">电话</p></span></router-link></li>
                        <li class="fl"><router-link id="" to=""><span class="clear"><img src="../assets/image/ico_store_icon@2x.png" class="nav-icon fl"/><p class="nav-text fr">店铺</p></span></router-link></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav-container-list" v-if="type == 'typeB'">
                2
            </ul>
        </div>
    </div>
</template>
<script>
    import Vue from 'vue'

    export default {
        data () {
            return {
                searchText:'请输入搜索关键词',
                type : 'typeA',
                storeList:[{brandName:'唐力',storeName:'海岸城',distant:'1.27km',storeAddress:'深圳市南山区海天二路海岸城3楼113号',product:[{productPrice:'186'},{productPrice:'1877'},{productPrice:'18'}]},{brandName:'唐力',storeName:'海岸城',distant:'1.27km',storeAddress:'深圳市南山区海天二路海岸城3楼113号',product:[{productPrice:'186'},{productPrice:'1877'},{productPrice:'18'}]}]
            }
        },
        name: 'app',
        methods:{
            tabToggle:function(tabText){
                this.type= tabText;
            }
        }
    }
</script>
<style lang="scss">
  .store-list-main{
    .search-wrap{padding:0.14rem 0.3rem;}
    .searchbar{
      width:6.9rem; height:0.6rem; border-radius:29px; background:#fff;
      .search-icon{ display:block; width:0.28rem; height:0.28rem; padding:0.16rem 0.11rem 0 0.21rem;}
      .search-text{ display:block; width:4.5rem; height:0.22rem; margin-top:0.19rem; border:0; outline:none; font-size:0.22rem; line-height:0.22rem; color:#aaa; background:#fff;}
      ::-webkit-input-placeholder{color:#aaa; font-size: 0.22rem; line-height:0.22rem; text-align:left;}
    }
    .navbar{
      width:100%; height:0.7rem; background:#fff;
      .nav-item{
        width:50%;
        position:relative;
        a{display:block; width:100%; height:0.68rem; border-bottom:0.02rem solid #f1f1f1;}
        span{display:block; width:0.58rem; height:0.68rem; margin:0 auto; font-size:0.28rem; line-height:0.7rem; text-align:center; color:#333;}
      }
      .active{
        span{border-bottom:0.02rem solid #ff365d; color:#ff365d;}
      }
    }
    .nav-container-list{ padding: 0;}
    .storebar{
      width: 100%; height: 5.56rem; background: #fff;
      +.storebar{ margin-top:0.2rem;}
      .store-msg{
        margin:0 0.24rem;
        height:1.9rem;
        border-bottom:1px solid #f1f1f1;
        .store-logo{ display: block; width:1.14rem; height: 1.14rem; padding: 0.38rem 0.19rem 0.38rem 0;}
        .store-text{width: 5.64rem; height: 1.9rem;}
        .store-name{
          padding:0.6rem 0 0.3rem 0; height: 0.3rem;
          i{display:block; font-size: 0.3rem; line-height: 0.3rem; color: #151517;}
          .distance{display:block; padding-top: 0.1rem; font-size: 0.2rem; line-height: 0.2rem; color: #8f8f8f;}
        }
        .store-add{
          width:100%; height:0.26rem;
          i{display:block; height:0.26rem; font-size: 0.26rem; line-height: 0.26rem; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; color: #666;}
          .tomap{display: block; width: 0.1rem; height: 0.18rem; padding-top: 0.04rem;}
        }
      }
      .store-pro{
        padding:0.32rem 0.22rem 0.38rem 0.22rem;
        height:2.17rem;
        border-bottom:2px solid #f1f1f1;
        li{
          width:2.17rem; height:2.17rem; position:relative;
          +li{margin-left: 0.26rem;}
          .product-img{ display: block; width: 2.17rem; height: 2.17rem;}
          .product-price{ position: absolute; right:0; bottom:0; height: 0.36rem; padding: 0 0.08rem; font-size: 0.26rem; line-height: 0.36rem; color: #fff; background:rgba(0,0,0,0.6);}
        }
      }
      .store-nav{
        width: 100%;
        li{
          width: calc(100%/3);
          a{ display: block; height:0.8rem;}
          span{
            display: block; width: 0.84rem; height: 0.28rem; margin: 0 auto; padding:0.26rem 0;
            .nav-icon{display: block; width: 0.28rem; height: 0.28rem;}
            .nav-text{ height:0.28rem; font-size: 0.24rem; line-height: 0.28rem; color: #151517;}
          }
        }
      }
    }
  }
</style>
